<template>
  <div class="form-container">
    <a-form
      :model="formState"
      :label-col="{ style: { width: '80px' } }"
      class="login-form"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="account"
        :rules="[{ required: true, message: '请输入用户名！' }]"
      >
        <a-input v-model:value="formState.account" placeholder="请输入用户名">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[{ required: true, message: '请输入密码！' }]"
      >
        <a-input-password v-model:value="formState.password" placeholder="请输入密码">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item>
        <a-button shape="round" type="primary" html-type="submit" class="login-form-button">
          登 录
        </a-button>
        <a-button shape="round" style="margin-top: 16px" class="login-form-button tourist" @click="touristLogin"> 游客登录 </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { computed, reactive } from 'vue'
import { router } from '@/router'
import { useAuth } from '@/stores/auth'
import { dynamicRoutes, routes } from '@/router/dynamic-routes'
import { useRoute } from 'vue-router'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { fetchLogIn, fetchTouristLogin } from '@/api/auth'
import { message } from 'ant-design-vue'
interface FormState {
  account: string
  password: string
}

const formState = reactive<FormState>({
  account: '',
  password: ''
})
const store = useAuth()
const route = useRoute()
const onFinish = async (values: any) => {
  const loginRes = await fetchLogIn(values);
  if (loginRes.data.code != 200) {
    return message.warn(loginRes.data.message)
  }
  store.$patch({
    token: loginRes.data.data.token
  })
  const res = await dynamicRoutes()
  if (res) {
    const flag = routes.find((item: any) => {
      return item.path === route.query.redirect
    })
    const name = flag ? flag.name : routes[0].name
    await router.push({
      name: name
    })
  }
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}

/**
 * 游客登录
 */
const touristLogin = async () => {
  const loginRes = await fetchTouristLogin()
  if (loginRes.data.code != 200) {
    return message.warn(loginRes.data.message)
  }
  store.$patch({
    token: loginRes.data.data.token
  })
  const res = await dynamicRoutes()
  if (res) {
    const flag = routes.find((item: any) => {
      return item.path === route.query.redirect
    })
    const name = flag ? flag.name : routes[0].name
    await router.push({
      name: name
    })
  }
}

</script>
<style lang="scss" scoped>
.form-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/img/bg.png') no-repeat;
  background-size: 100% 100%;
}
.login-form {
  padding: 20px 30px 0;
  width: 320px;
  background: #ffffff;
  position: relative;
  border-radius: 0 0 15px 15px;
  &::before {
    content: '';
    position: absolute;
    top: -92px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 92px;
    background-color: #000;
    background: url('@/assets/img/login-head.png') no-repeat;
    background-size: 100% 100%;
  }
}
.login-form-forgot {
  float: right;
}
.login-form-button {
  width: 100%;
  &.tourist {
    color: #569A59;
    border-color: #569A59;
  }
}
</style>
